<template>
<div class="page" style="margin-bottom: 150px;">
    <!--dingtianB begin -->
    <div id="banner">
        <img src="../assets/image/banner.jpg" alt="">
    </div>
    <!--dingtianB end -->
    <div id="mallPage" class=" mallist tmall- page-not-market ">

        <div id="content">
            <div class="main">

                <div id="search-box">
                    <div class="search">
                        <input type="text" name="name" class="search-input" placeholder="搜索 如 : 短袖T恤 男 或者 GXG男装旗舰店">
                        <button type="submit" class="search-submit" data="" @click="getList(1)"></button>
                    </div>
                </div>


                <div class="filter clearfix" id="J_Filter">

                    <a class="fSort fSort-cur comprehensive" href="javascript:;" @click="initial()" title="点击后恢复默认排序">综合<i class="f-ico-arrow-d"></i></a>

                    <a class="fSort choice" href="javascript:;" title="点击后按月销量从高到低" @click="sales($event)" types="month_sales,DESC" >销量<i class="f-ico-arrow-d"></i></a>

                    <a class="fSort choice" href="javascript:;" title="点击后按价格从高到低" @click="sales($event)" types="goods_price,DESC" >价格<i class="f-ico-arrow-d"></i></a>

                    <a class="fSort choice" href="javascript:;" title="点击后按价格从低到高" @click="sales($event)" types="goods_price,ASC" >价格<i class="f-ico-arrow-u"></i></a>
                    
                    <a href="javascript:;" class="fType-w platform" style="padding-right: 0;" @click="orderBy($event)" >淘宝<i class="fTw-ico"></i></a>
                    <a href="javascript:;" class="fType-w platform" style="padding-right: 0;" @click="orderBy($event)" >天猫<i class="fTw-ico"></i></a>
                    
                </div>

                <div class="view" id="J_ItemList">

                    <div class="product" v-for="goods in data"> 
                        <div class="product-iWrap">
                            <div class="productImg-wrap">
                                <a :href="goods.taobaoke" class="productImg" target="_blank">
                                    <img :src="goods.main_img" >
                                </a>

                            </div>

                            <p class="productPrice">
                                <em title="68.00"><b>¥</b>{{goods.goods_price}}</em>
                                 <span>优惠券&nbsp;:&nbsp;<span class="youhui">{{goods.coupon_name}}</span></span>
                            </p>

                            <p class="productTitle">
                                <a :href="goods.taobaoke" target="_blank" :title="goods.goods_name" >
                                   {{goods.goods_name}}
                                </a>
                            </p>

                            <div class="productShop">
                                <a class="productShop-name" :href="goods.taobaoke" target="_blank">
                                    {{goods.shop_name}}
                                </a>
                                <span style="float:right;">月销 <span>{{goods.month_sales}}</span></span>
                            </div>

                            <p class="productStatus">
                                <a :href="goods.taobaoke" target="_blank" >查看详情</a>
                                <a class="right-none" :href="goods.coupon_market_link" target="_blank" >先领优惠券</a>
                            </p>
                        </div>
                    </div>
                </div>
                <!--分页-->
                <div class="goods-page">
                    
                    <ul class="pagination">
                        <span v-show="totalGoodsNum > 0">{{totalGoods}}</span>
                        <li v-show="current > 1" @click="current-- && goto(current--)" ><a href="#">上一页</a></li>
                        <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
                        <a href="#" >{{index}}</a>
                        </li>
                        <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>

                        <li v-show="current > 1 && current < allpage" @click="goto(allpage)" ><a href="#">最后一页</a></li>
                    </ul>
                </div>
                <!--分页-->
            </div>
        </div>
    </div> 
</div>
</template>
<script>
require("../assets/js/jquery.min.js");
require("../assets/js/index.js");
export default {
  name:"Shop",

  data (){
    return {
        data:{},
        totalGoods:{},
        totalGoodsNum:{},
        current:{Number: 1},
        showItem:{Number: 1},
        allpage:{Number: 1},
        orderByc:{},
    }
  },

  mounted() {
        this.getList(1)
  },
  computed:{
    pages:function(){
        var pag = [];
            if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                //总页数和要显示的条数那个大就显示多少条
                var i = Math.min(this.showItem,this.allpage);
                while(i){
                    pag.unshift(i--);
                }
            }else{ //当前页数大于显示页数了
                var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                    i = this.showItem;
                if( middle >  (this.allpage - this.showItem)  ){
                    middle = (this.allpage - this.showItem) + 1
                }
                while(i--){
                    pag.push( middle++ );
                }
            }
        return pag
    }
  },

  methods:{
      goto:function(index)
      {
          if(index == this.current) return;
            this.current = index;
            //这里可以发送ajax请求
            this.getList(this.current)
      },

      getList:function(page)
      {
            let name = $('.search-input').val();

            let platform = $('.platformThis').attr('platform');
            if(typeof(platform) == 'undefined'){
                platform = '';
            }

            let choice = $('.choiceThis').attr('sort');
            if(typeof(choice) == 'undefined'){
                choice = '';
            }
            
            
            this.$http.get("http://www.wyyys.cn/api/goods?page=" + page + "&name=" + name + "&platform=" + platform + "&choice=" + choice).then(function (res) {
                // 处理成功的结果
                this.data = res.body.data.data;
                this.totalGoodsNum = res.body.data.total;
                
                this.current= res.body.data.current_page;
                this.showItem = 6;
                this.allpage = res.body.data.last_page;
                this.totalGoods = res.body.data.total + "件商品";

            },function (res) {
                // 处理失败的结果
                alert('网络失败,请刷新重试');
            }
        );
      },


      orderBy:function(event)
      {
        let elv = event.currentTarget;// 在绑定dom中获取this
		let platform = $(elv).text();

        $(elv).attr('platform',platform).siblings('.platform').removeAttr('platform');
        $(elv).addClass('platformThis').siblings('.platform').removeClass('platformThis');

        this.getList(1);

      },

      sales:function(event)
      {
        let elv = event.currentTarget;// 在绑定dom中获取this
		let types = $(elv).attr('types');
        
        $(elv).attr('sort',types).siblings('.choice').removeAttr('sort');
        $(elv).addClass('choiceThis').siblings('.choice').removeClass('choiceThis');

        this.getList(1);
        
      },
      
      initial:function()
      {
        $('.platformThis').removeAttr('platform');
        $('.choiceThis').removeAttr('sort');

        this.getList(1);
      }

      

  }

}

</script>

<style scoped>
    @import '../assets/css/index.css';
</style>
